// 监控分站 设备详情组件，包括 模板，emitter事件等
import Component from "../Component.js";
import ServiceUtils from "../../experience/other/shanxi/ServiceUtils.js";
export default class KstationDetail extends Component {
    constructor() {
        super();
    }

    template() {
        const kstationDetailPopup = `
            <div id="kstationDetail" style="width: 450px;height: 200px;" class="deviceDetail">
                <div class="detailheader">
                    <span class="title">监控分站信息</span>
                    <i id="kstationDetailClosePan" class="fas fa-times closeIcon"></i>
                </div>
                <div class="detailcontent">
                
                </div>  
            </div>
        `
        this.$$("#article").append(kstationDetailPopup);
    }

    async control() {
        this.ServiceUtils = new ServiceUtils()
        // 创建 overlay
        this.deviceDetailOverlay = this.drawer.addOverlay('kstationDetail','kstationDetailClosePan')
        this.deviceDetailOverlay.setOffset([10,10])
        // 相关 emit事件的初始化
        this.emitEventInit()
    }

    emitEventInit() {
        const mode = this.utils.getUrlParamer('edit')
        const meta_id = this.utils.getUrlParamer('meta_id')
        const flag = mode == 'true' ? true : false
        this.emitter.on('kstation-detail-open',async () => {
            if(flag) {
                return
            }
            const detailContent = this.$$('#kstationDetail .detailcontent')
            detailContent.empty()
            const targetArgument = this.emitter.params[0]
            const device_id = targetArgument.get('device_id')
            const coordinate = targetArgument.getGeometry().getCoordinates()
            this.deviceDetailOverlay.setPosition(coordinate)
            const {data: kstations} = await this.api.current_kstation_data(meta_id)
            const enableNode = kstations.find((station) => {
                return station.StationID == device_id
            })
            const dateTimeArr = enableNode.DataTime.split('T')
            const createTimeArr = enableNode.CreateTime.split('T')
            const detailInfoContent = `
                <div class="infoitem">
                     <div class="detailname">分站编号</div>
                     <div class="detailval">${enableNode.StationID}</div>              
                </div>
                <div class="infoitem">
                     <div class="detailname">分站位置</div>
                     <div class="detailval">${enableNode.StationPlace}</div>              
                </div>
                <div class="infoitem">
                     <div class="detailname">数据时间</div>
                     <div class="detailval">${dateTimeArr[0] + ' ' + dateTimeArr[1]}</div>              
                </div>
                <div class="infoitem">
                     <div class="detailname">创建时间</div>
                     <div class="detailval">${createTimeArr[0] + ' ' + createTimeArr[1]}</div>              
                </div>
                <div class="infoitem">
                     <div class="detailname">是否重点分站</div>
                     <div class="detailval">${enableNode.important ? '是' : '否'}</div>              
                </div>
            `
            detailContent.append(detailInfoContent)

        })
    }


}